<script setup name="HomeHeader">
import city from '@/assets/data/city.json'
import useWeatherStore from '@/store/hooks/useWeatherStore'

const weatherStore = useWeatherStore()
const p_weather = ref('')
const weather = computed(() => {
  const data = weatherStore.data
  if (!data) return ''
  return `[${data?.cityname}] ${data?.today?.condition} ${data?.currenttemp}`
})

const is_show_popover = ref(false)
const togglePopover = () => {
  is_show_popover.value = !is_show_popover.value
}
const handleCityChange = (e) => {
  if (!e.length) return
  const city = e[e.length - 1] || ''
  weatherStore.changeCity(city)
}

</script>

<template>
  <div class="header p-3 flex items-center justify-between text-sm">
    <div class="left">
      <el-popover
        :visible="is_show_popover"
        :width="230"
        size="small"
        placement="bottom"
        trigger="click"
      >
        <template #default>
          <el-cascader
            v-model="p_weather"
            placeholder="选择城市,支持搜索"
            :options="city"
            filterable
            @change="handleCityChange"
          />
          <div class="mt-3 flex w-full justify-end items-center">
            <el-button type="primary" @click="togglePopover">确定</el-button>
          </div>
        </template>
        <template #reference>
          <div @click="togglePopover">{{ weather }}</div>
        </template>
      </el-popover>
    </div>
    <nav class="right flex items-center space-x-4">
      <a href="#" class="flex items-center">
        <app-icon class="mr-1" icon="bx:bx-news"></app-icon>新闻
      </a>
      <home-header-msg></home-header-msg>
      <a href="#" class="flex items-center">
        <app-icon class="mr-1" icon="dashicons:admin-site-alt3"></app-icon>好站
      </a>
      <a href="#" class="flex items-center">
        <app-icon class="mr-1" icon="emojione-monotone:new-button"></app-icon>最新
      </a>
      <a href="#" class="flex items-center">
        <app-icon class="mr-1" icon="ant-design:setting-filled"></app-icon>设置
      </a>
    </nav>
  </div>
</template>

<style lang="scss" scoped>
</style>
